<template>
  <input ref="input" type="digit" :placeholder="placeholder" v-model="inputValue" class="input" @input="handleInput"/>
</template>

<script>
export default {
  name: "digit-input",
  data() {
    return {
      inputValue: this.value
    }
  },
  props: {
    value: {
      type: Number | String,
      default: 0,
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleInput(e) {
      //正则表达试
      let value = e.target.value
      value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      //重新赋值给input
      this.$nextTick(() => {
        this.inputValue = value
      })
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.inputValue = newValue
    },
    inputValue(newValue, oldValue) {
      this.$emit("input", newValue);
    },
  },
}
</script>

<style scoped lang='scss'>
.a {
}
</style>